<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="Plus"
          @click="handleAdd"
          v-hasPermi="['boc:publish:add']"
        >新增资源上传</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="danger"
            plain
            icon="Delete"
            @click="handleDelete"
            v-hasPermi="['boc:publish:remove']"
        >删除资源</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="publishList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <!-- <el-table-column label="活动编号" align="center" prop="activitySn" /> -->
      <el-table-column label="活动标题" align="center" prop="activityTitle" />
      <el-table-column label="活动描述" align="center" prop="activityDesc" />
      <el-table-column label="发布时间" align="center" prop="activityPtime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.activityPtime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="有效开始时间" align="center" prop="activityStime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.activityStime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="有效结束时间" align="center" prop="activityEtime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.activityEtime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="活动积分" align="center" prop="activityIntegral" />
      <el-table-column label="人数要求" align="center" prop="activityReqper" />
      <el-table-column label="已报名人数" align="center" prop="activityRegper" />
      <el-table-column label="活动发起人" align="center" prop="activityPubper" />
      <el-table-column label="活动签到二维码" align="center" prop="activitySqrcode" width="100">
        <template #default="scope">
          <image-preview :src="scope.row.activitySqrcode" :width="50" :height="50"/>
        </template>
      </el-table-column>
      <el-table-column label="活动签退二维码" align="center" prop="activityEqrcode" width="100">
        <template #default="scope">
          <image-preview :src="scope.row.activityEqrcode" :width="50" :height="50"/>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <el-tabs type="border-card" style="margin-top:40px" @tab-click="handleClickTop">
      <el-tab-pane label="基本信息">
        <el-tabs v-model="activeName" class="demo-tabs" v-value="activeName">
          <el-tab-pane label="企业基本信息" name="topFirst">
            <el-descriptions>
              <el-descriptions-item label="统一社会信用代码">91450107MA5K9LN90W</el-descriptions-item>
              <el-descriptions-item label="企业名称">南宁诚维网络科技有限公司</el-descriptions-item>
              <el-descriptions-item label="法定代表人">钟德丽</el-descriptions-item>
              <el-descriptions-item label="注册资本">3万元人民币</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="高管信息" name="topSecond">
            <el-descriptions>
              <el-descriptions-item label="法定代表人">钟德丽</el-descriptions-item>
              <el-descriptions-item label="大股东">黄诚勇</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="股东信息" name="topThird">

          </el-tab-pane>
          <el-tab-pane label="对外投资信息" name="topFourth">

          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="经营状态">
        <el-tabs v-model="activeName" class="demo-tabs" v-value="activeName">
          <el-tab-pane label="资质证书" name="secFirst">
            <el-descriptions>
              <el-descriptions-item label="质量管理体系认证"></el-descriptions-item>
              <el-descriptions-item label="环境管理体系认证"></el-descriptions-item>
              <el-descriptions-item label="职业健康安全管理体系认证人"></el-descriptions-item>
              <el-descriptions-item label="信息安全管理体系认证"></el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="行政许可息" name="secSecond">
            <el-descriptions>
              <el-descriptions-item label="电信业务经营许可证">桂B2-20200216</el-descriptions-item>
              <el-descriptions-item label="食品经营许可证">JY14501080074049</el-descriptions-item>
              <el-descriptions-item label="对外贸易经营者备案登记">05046497</el-descriptions-item>
              <el-descriptions-item label="准予变更税务行政许可决定书">(南良税一分)许变准字﹝2019﹞第(41171)号</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="项目名称" name="secThird">

          </el-tab-pane>
          <el-tab-pane label="信用评价" name="secFourth">

          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="企业发展">Role</el-tab-pane>
      <el-tab-pane label="知识产权">Task</el-tab-pane>
    </el-tabs>

    <!-- 添加资源 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="publishRef" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="资源附件" prop="docFiles">
          <boc-upload 
          v-model="form.docFiles"
          fileSize = 200
          :fileType = "fileType"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancel">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Publish">
import { listPublish, getPublish, delPublish, addPublish, updatePublish } from "@/api/boc/publish";

const { proxy } = getCurrentInstance();

const publishList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const title = ref("");
const pDateRange = ref([]);
const validDateRange = ref([]);
const fileType = ref(["zip","jar"]);
const activeName = ref("");

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
  
});

const { queryParams, form, rules } = toRefs(data);

/** 查询活动发布列表 */
function getList() {
  loading.value = true;
  let search = queryParams.value;
  search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {};
  search.params['pStartDate'] = pDateRange.value[0];
  search.params['pEndDate'] = pDateRange.value[1]; 
  let validStartDate = validDateRange.value[0];
  let validEndDate = validDateRange.value[1];

  if(validStartDate != null && validStartDate !== undefined)
  {
    search.params['validStartDate'] = validDateRange.value[0].slice(0,10)+" 23:59:59";
    search.params['validEndDate'] = validDateRange.value[1].slice(0,10)+" 00:00:00";
  }

  
  listPublish(search).then(response => {
    publishList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}


/** 新增按钮操作 */
function handleAdd() {
  open.value = true;
  title.value = "添加资源发布";
}

/** 删除按钮操作 */
function handleDelete(row) {
  proxy.$modal.confirm('是否确认删除已上传的资源项').then(function() {
    return delPublish();
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

getList();

/**点击第一层标签*/
function handleClickTop(tab){
  alert("选择第"+tab.index+"标签，开始获取第"+tab.index+"标签下的所有数据")
  switch (tab.index) {
          case '0':
            getTopFirstDate(tab.index);
            return;
          case '1':
            getTopFirstDate(tab.index);
            return '1'
          case '2':
            return '2'
          case '3':
            return '3'
          default:
            return 'iconfont iconxiangmutongji'
        }
}
function getTopFirstDate(topIndex){
  switch (topIndex) {
          case '0':
            activeName.value = "topFirst";
            return;
          case '1':
            activeName.value = "secFirst";
            return;
          case '2':
            return '2'
          case '3':
            return '3'
          default:
          activeName.value = "topFirst";
        }
}

onMounted(() => {
  getTopFirstDate();
});

</script>
